<span>{{count}} instances</span>

<table class="table table-striped">
    <thead>
    <th>Process Instance Key</th>
    <th>State
        <a id="instance-state" href="#" class="badge badge-secondary" data-toggle="tooltip" data-placement="top"
           title="Sort by Instance State">
        </a>
    </th>
    <th>Start Time
        <a id="instance-start-time" href="#" class="badge badge-secondary" data-toggle="tooltip" data-placement="top"
           title="Sort by Start Time">
        </a>
    </th>
    </thead>

    {{#instances}}
    <tr>
        <td>
            <a href="{{context-path}}views/instances/{{processInstanceKey}}">{{processInstanceKey}}</a>
        </td>
        <td>{{state}}</td>
        <td>{{startTime}}</td>
    </tr>
    {{/instances}}

</table>

{{>components/table-pagination}}

<script>
    document.addEventListener('DOMContentLoaded', function(){
        listSort('state','instance-state')
    }, false);
    document.addEventListener('DOMContentLoaded', function(){
        listSort('start','instance-start-time')
    }, false);
</script>
